<script setup name="GfJfd">
import { CircleCheckFilled } from '@element-plus/icons-vue'
import Message from 'vue-m-message'
import DictTag from '@/components/DictTag/index.vue'
import zlAgencyService from '@/api/finance/zlAgency.js'
import FileViewer from '@/components/FileViewer/FileViewer.vue'
import gfJfdService from '@/api/gfJfd/index.js'
import ossService from '@/api/oss/index.js'
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import { useDict } from '@/utils/dict.js'
import { tableCheckChane } from '@/utils/index.js'

const { proxy } = getCurrentInstance()
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const tableData = ref([])
const viewTableData = ref([])
const { sys_patent_type, jf_node, jfd_status, gf_record_status, discount_rate, sys_pay_type,confirm_discount_rate } = useDict('sys_patent_type', 'jf_node', 'jfd_status', 'gf_record_status', 'discount_rate', 'sys_pay_type','confirm_discount_rate')
const customerList = ref([])

const tableColumn = reactive([
  {
    type: 'checkbox',
    width: 50,
    align: 'center',
  },
  {
    title: '客户名称',
    field: 'customerName',
    align: 'center',
  },
  {
    title: '待缴费用',
    field: 'djMoney',
    align: 'center',
  },
  {
    title: '状态',
    field: 'status',
    align: 'center',
    slots: {
      default: 'status',
    },
  },
  {
    title: '操作',
    field: 'actions',
    align: 'center',
    width: 250,
    slots: {
      default: 'actions',
    },
  },
])
const viewTableColumn = reactive([
  {
    title: '客户名称',
    field: 'customerName',
    align: 'center',
  },
  {
    title: '合同编号',
    field: 'contractNumber',
    align: 'center',
  },
  {
    title: '案件编号',
    field: 'patentNumber',
    align: 'center',
  },
  {
    title: '申请号',
    field: 'applyNumber',
    align: 'center',
  },
  {
    title: '业务名称',
    field: 'patentName',
    align: 'center',
  },
  {
    title: '业务类型',
    field: 'patentType',
    align: 'center',
    slots: {
      default: 'patentType',
    },
  },
  {
    title: '缴费节点',
    filed: 'jfNode',
    align: 'center',
    slots: {
      default: 'jfNode',
    },
  },
  {
    title: '待缴费用',
    field: 'djMoney',
    align: 'center',
  },
  {
    title: '费减比例',
    field: 'discountRate',
    align: 'center',
    slots: {
      default: ({ row }) => {
        return h(DictTag, {
          options: discount_rate.value,
          value: row.discountRate,
        })
      },
    },
  },
  {
    title: '实缴日期',
    field: 'paymentTime',
    align: 'center',
  },
  {
    title: '缴费方式',
    field: 'feeType',
    align: 'center',
    slots: {
      default: ({ row }) => {
        return h(DictTag, {
          options: sys_pay_type.value,
          value: row.feeType,
        })
      },
    },
  },
  {
    title: '状态',
    field: 'status',
    align: 'center',
    slots: {
      default: 'status',
    },
  },
  {
    title: '备注',
    field: 'remark',
    align: 'center',
  },
])
const searchConfig = reactive([
  {
    type: 'select',
    field: 'customerId',
    defaultShow: true,
    options: {
      data: customerList,
      label: 'customerName',
      value: 'customerId',
      key: 'customerId',
    },
    label: '客户名称',
  },
  {
    label: '状态',
    type: 'select',
    field: 'status',
    options: {
      data: jfd_status,
    },
  },
])
const queryParam = ref({})
const uploadForm = ref({
  gfJfdId: '',
  ossId: '',
})
const uploadDialogVisible = ref(false)
const viewDialogVisible = ref(false)
const fileDetail = ref({})

onMounted(() => {
  getList()
})

function getList() {
  const params = {
    ...queryParam.value,
    pageNum: pagerConfig.value.currentPage,
    pageSize: pagerConfig.value.pageSize,
  }
  gfJfdService.list(params).then((res) => {
    tableData.value = res.rows
    pagerConfig.value.total = res.total
  })
  zlAgencyService.optionList().then((res) => {
    customerList.value = res.data
  })
}

function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'gfJfdId', ids.value)
}

function handleExport() {
  proxy.download('system/gfJfd/export', { gfJfdIds: ids.value.join(','), ...queryParam }, `gfJfd_${new Date().getTime()}.xlsx`)
}

function handleSearch(params) {
  queryParam.value = params
  pagerConfig.value.currentPage = 1
  getList()
}

function handleUpload(row) {
  uploadForm.value.gfJfdId = row.gfJfdId
  uploadDialogVisible.value = true
}

function handleUploadSubmit() {
  const {
    ossId,
    gfJfdId,
  } = uploadForm.value
  gfJfdService.uploadOss(gfJfdId, ossId).then((res) => {
    const { code } = res
    if (code === 200) {
      Message.success('上传成功')
      handleDialogClose()
      getList()
    }
  })
}

async function handleView(row) {
  // gfJfdService.detail(row.gfJfdId).then(res=>{
  //   console.log(res)
  // })
  const res = await gfJfdService.detail(row.gfJfdId)
  if (res.code === 200) {
    viewTableData.value = res.data.sysGfRecordVoList
    viewDialogVisible.value = true
    if (res.data.filePath) {
      const fileData = await ossService.listByIds(res.data.filePath)
      fileDetail.value = fileData.data[0]
    }
  }
}
function handleDelete(id) {
  gfJfdService.delete(id).then((res) => {
    const { code } = res
    if (code === 200) {
      Message.success('删除成功')
      getList()
    }
  })
}
function handleDialogClose() {
  uploadForm.value = {}
  fileDetail.value = {}
  uploadDialogVisible.value = false
  viewDialogVisible.value = false
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="searchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:gfJfd:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :row-config="{
          keyField: 'gfJfdId',
        }"
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        max-height="600px"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
      >
        <template #status="{ row }">
          <DictTag :options="jfd_status" :value="row.status" />
        </template>
        <template #actions="{ row }">
          <el-button
            v-if="row.status === '0'"
            v-hasPermi="['system:gfJfd:upload']"
            text
            size="small"
            type="primary"
            @click="handleUpload(row)"
          >
            上传
          </el-button>
          <span v-if="row.status === '0'" v-hasPermi="['system:gfJfd:remove']">
            <el-popconfirm
              :title="`确认要删除 ${row.customerName} 的缴费单吗？`"
              width="200"
              @confirm="handleDelete(row.gfJfdId)"
            >
              <template #reference>
                <el-button type="danger" size="small" text>
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </span>
          <el-button text type="success" size="small" @click="handleView(row)">
            查看
          </el-button>
        </template>
      </vxe-grid>
    </el-card>
    <el-dialog v-model="uploadDialogVisible" class="custom-dialog" width="27%" @close="handleDialogClose">
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px] ">
            上传缴费凭证
          </span>
        </div>
      </template>
      <el-alert title="提交缴费凭证后无法修改，请仔细核对！" type="warning" :closable="false" show-icon />
      <file-upload v-model="uploadForm.ossId" :limit="1" :file-type="[]" class="mt-3" />
      <template #footer>
        <div class="dialog-footer pb-5 mr-5">
          <el-button plain type="primary" @click="handleDialogClose">
            取消
            <el-icon class="ml-1">
              <CircleCloseFilled />
            </el-icon>
          </el-button>
          <el-button type="primary" :disabled="!uploadForm.ossId" @click="handleUploadSubmit">
            确认上传
            <el-icon class="ml-1">
              <CircleCheckFilled />
            </el-icon>
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="viewDialogVisible" class="custom-dialog" width="1600" top="3%"
      @close="handleDialogClose"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px] ">
            查看
          </span>
        </div>
      </template>
      <vxe-grid
        :data="viewTableData"
        :columns="viewTableColumn"
        header-cell-class-name="headerCellClass"
      >
        <template #patentType="{ row }">
          <DictTag :options="sys_patent_type" :value="row.patentType" />
        </template>
        <template #jfNode="{ row }">
          <DictTag :options="jf_node" :value="row.jfNode" />
        </template>
        <template #status="{ row }">
          <DictTag :options="gf_record_status" :value="row.status" />
        </template>
      </vxe-grid>
      <div v-if="fileDetail.url" class="mt-5 h-150 overflow-y-auto">
        <FileViewer :file-suffix="fileDetail.fileSuffix" :file-url="fileDetail.url" class="w-full h-150" />
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>
